<template>
  <div class="page">
    <!-- 顶部筛选 开始 -->
    <div class="top_filter">
      <van-dropdown-menu>
        <van-dropdown-item v-model="combinedId" :options="combinedList" @change="onChange" />
        <van-dropdown-item v-model="gender" :options="GENDER_OPTIONS" @change="onChange" />
        <van-dropdown-item v-model="projectId" :options="projectList" @change="onChange" />
        <van-dropdown-item v-model="titleId" :options="titleList" @change="onChange" />
      </van-dropdown-menu>
    </div>
    <!-- 顶部筛选 end -->

    <!-- 医生列表 开始 -->
    <div class="list_box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="30" @load="loadMore">
        <template v-if="doctorList && doctorList.length">
          <doctor class="test" v-for="(item, index) in doctorList" :key="`doctor_${index}`" :info="item"></doctor>
        </template>
        <no-data v-else></no-data>
      </van-list>
    </div>
    <!-- 医生列表 end -->
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem, List } from "vant";
import Doctor from "@/components/doctor/index.vue";
import {
  PLATFORM_TYPE,
  GET_DOCTOR_SEARCH,
  GET_HOSPITAL_PROJECT_OPTIONS,
  GET_HOSPITAL_COMBINED_OPTIONS,
  GET_DOCTOR_CITY_OPTIONS,
  GET_DOCTOR_TITLE_OPTIONS,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
import { GENDER_OPTIONS } from "@/utils/constants";
export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    Doctor,
  },
  data() {
    return {
      combinedId: "",
      gender: "",
      projectId: "",
      titleId: "",
      doctorList: [],
      combinedList: [],
      projectList: [],
      areaList: [],
      titleList: [],
      GENDER_OPTIONS,
      seoInfo: {},
      totalElements: 0,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 20
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/doctor`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    let city = $cookies.get("city");
    let oParams = { pageNumber: 1, pageSize: 20 };
    if (city && city != "全国") {
      oParams.city = city;
    }

    let combinedId = Number(query.combinedId) || "";
    let gender = query.gender || "";
    let projectId = Number(query.projectId) || "";
    let titleId = Number(query.titleId) || "";

    oParams.combinedId = combinedId;
    oParams.gender = gender;
    oParams.projectId = projectId;
    oParams.titleId = titleId;

    let d = await $axios.get(GET_DOCTOR_SEARCH, { params: oParams });
    let dres = d.data || {};
    let doctorList = dres.list || [];

    // 综合排序
    let combinedList = [{ text: "综合排序", value: "" }];
    let c = await $axios.get(GET_HOSPITAL_COMBINED_OPTIONS);
    (c.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      combinedList.push(k);
    });

    // 擅长项目
    let projectList = [{ text: "擅长项目", value: "" }];
    let p = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
    (p.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      projectList.push(k);
    });

    // 所在地区
    // let areaList = [{ text: "所在地区", value: "" }];
    // let a = await $axios.get(GET_DOCTOR_CITY_OPTIONS);
    // (a.data || []).map((k) => {
    //   k.text = k.name;
    //   k.value = k.code;
    //   areaList.push(k);
    // });

    // 专职职称
    let titleList = [{ text: "专业职称", value: "" }];
    let t = await $axios.get(GET_DOCTOR_TITLE_OPTIONS);
    (t.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      titleList.push(k);
    });

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 2, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      doctorList,
      combinedList,
      projectList,
      titleList,
      combinedId,
      gender,
      projectId,
      titleId,
      seoInfo,
      totalElements: dres.totalElements,
    };
  },
  methods: {
    // 监听下拉菜单
    onChange(e) {
      let params = this.$route.query;
      console.log(params);
      this.$router.replace({
        path: "/doctor",
        query: {
          ...params,
          combinedId: this.combinedId,
          gender: this.gender,
          projectId: this.projectId,
          titleId: this.titleId,
        },
      });
    },

    // 获取参数
    getParams() {
      let params = {};
      params.combinedId = this.combinedId;
      params.gender = this.gender;
      params.projectId = this.projectId;
      params.titleId = this.titleId;

      params.pageNumber = this.pageNumber;
      params.pageSize = this.pageSize;

      let city = this.$cookies.get("city");
      if (city && city != "全国") {
        params.city = city;
      }
      return params;
    },

    // 触底加载
    loadMore() {
      let totalElements = this.totalElements;
      let list = this.doctorList;
      let num = this.pageNumber;
      console.log(list.length + '----' + totalElements)
      // 判断是否还有下一页
      if (list.length < totalElements) {
        this.pageNumber = num + 1;
        this.getList();
      } else {
        this.finished = true;
      }
    },

    // 获取列表
    async getList() {
      let oParams = this.getParams();
      let olist = this.doctorList;
      this.loading = true;
      let res = await this.$axios.get(GET_DOCTOR_SEARCH, { params: oParams });
      this.loading = false
      if (res.code == 200) {
        let obj = res.data || {};
        let nList = obj.list || [];
        let n = olist.concat(nList);
        this.doctorList = n;
      }
    },

  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/doctor.less";
</style>